body {
  margin: 0;
  overflow: hidden;
  -webkit-user-select: none;
}
html,body{
  height: 100%;
}
#left_nav{
  width: 15%;
  float: left;
  background-color: #20B2AA;
  height: 600px;
}
#body{
  float: left;
  width: 85%;
  height: 600px;
  overflow: hidden;
  overflow-y: scroll;
  z-index: -1;
}
#body::-webkit-scrollbar{
  width: 5px;
  background-color:lightgray;
}
#body::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgb(0, 221, 210);
}
ul,li{
  list-style: none;
  margin: 0 auto;
  padding-inline-start:0px;
}
a{
  text-decoration: none;
  color: black;
}
.left_li{
  font-size: 20px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transition: all linear 0.2s;
  cursor: pointer;
}
.left_li:hover{
  transition: all linear 0.2s;
  font-size: 30px;
  background-color: #008080;
}
.selected{
  font-size: 30px;
  background-color: #008080;
}
.left_ul{
  width: 15%;
  position: absolute;
}
#footer{
  width:100%;
  float: left;
  height: 100px;
  background-color: #696969;
}
.li_inner{
  float:left;
  font-size:15px;
  text-align:center;
  line-height:40px;
  height:40px;
  border: 1px solid gray;
  z-index: 10;
  overflow: hidden;
}
.li_inner>input{
  border: none;
  outline: none;
  height: 40px;
  text-align: center;
  width: 100%;
  z-index: 10;
  margin: 0 auto;
  transition: all linear 0.2s; 
}
.li_inner:hover{
  transition: all linear 0.2s;
  background-color: rgb(87, 87, 87);
  color: white;
  cursor: pointer;
}
.li_th{
  font-size: 20px;
  color: rgb(221, 0, 155);
  font-weight: 1000;
}
.li_inner>input:hover{
  transition: all linear 0.2s;
  background-color: #dbdbdb;
}
.li_inner>input:focus{
  background-color: #b6b6b6;
}
.ul_inner{
  height: 50px;
  z-index: 10;
  width: 100%;
  float: left;
}
#search{
  border: none;
  outline: none;
  display: block;
  width: 80%;
  height: 40px;
  float: left;
  text-indent: 20px;
  font-size: 20px;
  color: white;
  background-color: rgb(133, 133, 133);
  border-radius: 3px 0px 0px 3px;
  transition: all linear 0.3s;
}
#search:hover{
  transition: all linear 0.3s;
  background-color: rgb(123, 196, 255);
}
#search:focus{
  background-color: rgb(0, 97, 177);
}
#search::placeholder{
  color: white;
}
#search_btn{
  border: none;
  outline: none;
  background-color: rgb(0, 95, 204);
  width: 20%;
  height: 40px;
  color: aliceblue;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transition: all linear 0.2s;
  float: left;
  border-radius:  0px 3px 3px 0px ;
}
#search_btn:hover{
  transition: all linear 0.2s;
  background-color: rgb(0, 134, 243);
}
#alter{
  width:50%;
  height: 40px;
  border: none;
  outline: none;
  display: block;
  float: left;
  font-size: 20px;
  background-color: rgb(0, 86, 126);
  color: rgb(231, 231, 231);
  cursor: pointer;
}
#delete{
  cursor: pointer;
  width: 50%;
  height: 40px;
  border: none;
  outline: none;
  float: left;
  font-size: 20px;
  background-color: rgb(255, 166, 0);
}
#alter:hover{
  transition: all linear 0.2s;
  background-color: rgb(0, 159, 207);
}
#delete:hover{
  transition:  all linear 0.2s;
  background-color: rgb(228, 72, 0);
}
.li_inner_form{
  width:15%;
  height: 40px;
  float: left;
}
#login_bg{
  width: 100%;
  height: 750px;
  position: absolute;
  top: 0px;
  z-index: -1;
  background-image: url(/images/bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(8px);
}
#login_container{
  height: max-content;
  overflow: hidden;
}
#login{
  position: absolute;
  top: 200px;
  left: 35%;
  width: 400px;
  transition: all linear 0.5s;
  background-color: rgba(137, 103, 168, 0.5);
  height: 280px;
  text-align: center;
  border-radius: 10px;

}
.pwd{
  width: 90%;
  margin-left: 1%;
  height: 50px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px gray;
  outline: none;
  border:none;
  line-height: 30px;
  font-size: 17px;
  font-weight: normal;
  color: black;
  text-indent: 5%;
  transition: all linear 0.8s;
  opacity: 0.8;
}
.pwd:hover{
  transition: all linear 0.8s;
  box-shadow: 2px 0px 10px rgb(0, 156, 204);
}
.user{
  width: 90%;
  margin-left: 1%;
  height: 50px;
  border-radius: 5px;
  border:none;
  box-shadow: 1px 1px 10px gray;
  outline: none;
  line-height: 30px;
  font-size: 17px;
  font-weight: normal;
  color: black;
  text-indent: 5%;
  transition: all linear 0.3s;
  margin-top: 20px;
  opacity: 0.8;
}
.user:hover{
  transition: all linear 0.8s;
  box-shadow: 2px 0px 10px rgb(0, 107, 150);
}
.user:focus{
  transition: all linear 0.3s;
  box-shadow: 2px 0px 5px rgb(10, 115, 214);
  opacity: 1;
}
.pwd:focus{
  transition: all linear 0.3s;
  box-shadow: 2px 0px 5px rgb(52, 145, 231);
  opacity: 1;
}
#btn{
  width: 90%;
  margin-left: 1%;
  height: 45px;
  border: none;
  outline: none;
  color: rgb(48, 48, 48);
  background-image: linear-gradient(rgb(0, 224, 49),rgb(0, 139, 23));
  font-size: 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 1000;
  transition: all linear 0.3s;
  margin-top: 0px;
}
#btn:hover{
  transition: all linear 0.3s;
  background-image: linear-gradient(rgb(0, 233, 78),rgb(0, 122, 21));
  color: rgb(212, 212, 212);
}
#btn:focus{
  transition: all linear 0.3s;
  background-image:linear-gradient(rgb(0, 139, 46),rgb(2, 134, 24),rgb(0, 92, 31));
}
#login_title{
  width: 100%;
  text-indent: 35%;
  font-weight: 1000;
  height: 100px;
  position: absolute;
  top: 10%;
  z-index: 10;
}
#login_title>span{
  color: rgb(0, 140, 255);
  font-size: 50px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 20px;
}
#loading_container{
  width:100%;
  height: 900px;
  transition: all linear 0.3s;
  background-color: rgb(26, 19, 29);
}
#loading{
  width:100%;
  text-align: center;
  position: absolute;
  top:20%;
}
#loading_title{
  position: absolute;
  text-align: center;
  color: aliceblue;
  font-size: 40px;
  width: 100%;
  top: 10%;
}
#insert{
  width: 100%;
  border: none;
  outline: none;
  background-color: rgb(0, 156, 218);
  height: 40px;
  cursor: pointer;
  float: left;
  color: aliceblue;
  font-size: 20px;
}
.exit{
  border:none;
  outline: none;
  height: 50px;
  width: 30%;
  float: right;
  background-color: orangered;
  cursor: pointer;
  font-size: 20px;
  color: #dbdbdb;
  transition: all linear 0.2s;
}
.exit:hover{
  transition: all linear 0.3s;
  background-color: orangered;
  font-weight: 900;
}
.insert_From{
  width: 70%;
  height: 70%;
  left: 20%;
  top: 12%;
  position: absolute;
  background-color: #20B2AA;
  z-index: 100;
  border-radius: 10px;
  overflow-y: scroll;
  display: none;
}
.insert_From::-webkit-scrollbar{
  width: 5px;
  background-color: bisque;
}
.insert_From::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background-color: #b6b6b6;

}
.insert_From>input{
  width: 80%;
  height: 30px;
  margin-top: 20px;
  margin-left: 10%;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 20px;
  text-indent: 20px;
}
.add{
  width:100%;
  background-color:blue;
  height:40px;
  color:white;
  text-align:center;
  line-height:40px;
  font-size: 30px;
}
.close{
  float:right;
  border:none;
  outline:none;
  height: 40px;
  background-color: orangered;
  cursor:pointer;
  color: #dbdbdb;
  font-size: 20px;
}
.insert_btn{
  width:30%;
  height:40px;
  color:white;
  border:none;
  outline: none;
  margin-left:32%;
  margin-top:20px;
  cursor: pointer;
  background-color:forestgreen;
  border-radius: 5px;
  font-size: 20px;
}
#img_show{
  float: left;
  margin-left: 10%;
  margin-top: 10px;
  border: 3px solid white;
  border-radius: 2px;
  transition: all linear 0.3s;
  background-color: antiquewhite;
  cursor: pointer;
  height: 50px;
}
.img_upload{
  border:none;
  outline: none;
  width: 20%;
}
#img_show1{
  float: left;
  margin-left: 10%;
  margin-top: 10px;
  border: 3px solid white;
  border-radius: 2px;
  transition: all linear 0.3s;
  background-color: antiquewhite;
  cursor: pointer;
  height: 50px;
}
.img_upload1{
  border:none;
  outline: none;
  width: 20%;
}
.insert_btn_outter{
  width: 87%;
  height: 40px;
  border: none;
  outline: none;
  background-color: cornflowerblue;
  font-size: 30px;
  font-weight: 900;
  color: white;
}
.insert_btn_outter:hover{
  transition: all linear 0.3s;
  background-color: dodgerblue;
  cursor: pointer;
}